<template>
  <fs-page>
    <template #header>
      <div class="title">
        租户中心管理
        <fs-icon icon="carbon:location-company" :spin="true" />
      </div>
    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template #cell_name="scope">
        <n-tooltip placement="bottom" trigger="hover">
          <template #trigger>
            {{ scope.row.name }}
          </template>
          <span> {{ scope.row.name }} </span>
        </n-tooltip>
      </template>
    </fs-crud>
  </fs-page>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue';
  import createCrudOptions from './crud';
  import { useExpose, useCrud } from '@fast-crud/fast-crud';

  export default defineComponent({
    name: 'TenantForm',
    setup() {
      const crudRef = ref();
      const crudBinding = ref();
      // const areaTree = ref([]);
      const { expose } = useExpose({ crudRef, crudBinding });
      const { crudOptions } = createCrudOptions({ expose });
      useCrud({ expose, crudOptions });

      onMounted(() => {
        expose.doRefresh();
      });

      const filter = (inputValue, path) => {
        return path.some(
          (option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
        );
      };
      return {
        filter,
        // areaTree,
        crudBinding,
        crudRef,
      };
    },
  });
</script>
